<template>

  <el-card>
        <template #header>
          <div class="userInfo">
            <el-row>
              <el-col :span="2">
                <el-avatar
                  :src="talk.member.avatarUrl"
                  :size="60"
                  shape="circle"
                ></el-avatar>
              </el-col>
              
              <el-col :span="6">
                <span>{{ talk.member.nickName }}</span>&nbsp;&nbsp;&nbsp;
                <el-tag>{{ talk.member.schoolName }}</el-tag>
                <el-tag>{{ talk.member.majorName }}</el-tag>
                <el-tag>{{ talk.member.majorYear }}</el-tag>
                <el-tag>{{ talk.member.gender }}</el-tag>
                <el-col :span="6">
                  <el-tag v-for="(roleTag,index) in talk.member.roleTagList" :key="index">
                    {{ roleTag }}
                  </el-tag>
                  
                </el-col>
                <el-col :span="6">
                  <el-tag  v-for="(tag,index) in talk.tagList" :key="index">
                    {{ tag.name }}
                  </el-tag>
                </el-col>
                <br />
                <span>{{ talk.createdTime }}</span>
              </el-col>
            </el-row>
          </div>
          <br />
          <!-- 文本内容 -->
          <el-text class="content">
            {{ talk.content }}
          </el-text>
          <br />
          <!-- 图片九宫格 -->
          <div class="imageBox">
            <el-image
              :style="{
                width:
                  talk.albumList.length == 3 || talk.albumList.length > 4
                    ? '33%'
                    : '49.5%',
              }"
              fit="contain"
              :src="item"
              v-for="(item, index) in talk.albumList.slice(0,9)"
              :key="index"
            ></el-image>
            <div v-if="talk.albumList.length > 9" class="masking" @click="toDetail(talk)">
              <span>+{{ talk.albumList.length - 9 }}</span>
            </div>
          </div>
          <div class="bottom">
              
              <!-- 点赞图标 -->
              <div class="likeIcon" @click="like_click(talk.id)">
                <svg
                v-if="!ifLike(talk.id)"
                style="font-size: 28px"
                class="icon"
                aria-hidden="true"
                >
                <use xlink:href="#icon-like"></use>
                </svg>
                <svg v-else style="font-size: 28px" class="icon" aria-hidden="true">
                  <use xlink:href="#icon-like1"></use>
                </svg>
                
              </div>
            <!-- 详情 -->
            <el-link style="font-size:16px" type="primary" :underline="false" @click="toDetail(talk)">详情</el-link>
          </div>
        </template>
        <template #default>
          <!-- 点赞用户 -->
          <div class="like">
            <span v-show="talk.likeNum > 0"
              >共{{ talk.likeNum }}人觉得很赞！</span
            >
          </div>
    
          <!-- 热评 -->
          <div class="hot_comment" v-if="talk.hostComment != null">
            <el-text style="color:red;font-size:18px" size="large">{{ talk.hostComment.content }}</el-text>
            <svg style="font-size: 28px" class="icon" aria-hidden="true">
              <use xlink:href="#icon-hot">说说</use>
            </svg>
          </div>
    
         
        </template>
      </el-card>
  
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { computed, inject, nextTick, onMounted, popScopeId, reactive, ref } from 'vue';
import { useStore } from 'vuex';
import { likeClick } from '@/api/dynamic';

const store = useStore();
const user = store.state.user;

//用户点赞列表Id
let likeList = ref(['']);
likeList.value = store.getters.getLikeList;

let talk = ref();
talk.value = JSON.parse(window.history.state.talk);
console.log("传过来的说说",talk.value);

//时间函数，必须放在 setup() 中
const nowDate = inject('nowDate');
//评论内容
let comment = ref();
//评论控制阀
let ifComment = ref(false);
const postComment = ref();
//自定义指令
const vFocus = {
  mounted: (el) => el.children[0].focus()
}
//点击评论事件
function click_comment() {
    ifComment.value = true;
  
}
//评论框失去焦点
function comment_blur() {
  if(comment.value == null){
    ifComment.value = false;
  }
}
//发送评论----使用 @mousedown 可以在 blur 事件前执行
function post_comment() {
  if(comment.value == null){
    ElMessage({
      message: '不能发送空内容',
      type: 'error'
    })
  }else {
    let newComment = reactive(
      {
        avatar: '',    //用户头像
        name: '',   //用户名
        time: '',   //评论时间
        content: '',    //评论内容
        replyList: [],  //回复列表
      }
    );
    newComment.content = comment.value;
    newComment.time = nowDate(new Date());
    newComment.avatar = user.avatar;
    newComment.name = user.name;
    store.dispatch('add_comment',{
      newComment,
      index
    })
    comment.value = null;
    // console.log(nowDate(new Date()))

  }
}

//回复评论
let reply = ref();
//回复控制阀
let ifReply = reactive([false]);

//回复点击事件
function to_reply(comment_index) {
  ifReply[comment_index] = true;
}
//回复框失去焦点
function reply_blur(comment_index) {
  if(reply.value == null) {
    ifReply[comment_index] = false;
  }
}
//发送回复评论
function post_reply(comment_index) {
  if(reply.value == null){
    ElMessage({
      message: '不能回复空',
      type: 'error'
    })
  }else {
    let newReply = reactive(
    {
        avatar: '',    //用户头像
        name: '',   //用户名
        time: '',   //评论时间
        content: '',    //评论内容
    });
    newReply.avatar = user.avatar;
    newReply.name = user.name;
    newReply.time = nowDate(new Date());
    newReply.content = reply.value;
    store.dispatch('add_reply',{
      index,
      comment_index,
      newReply
    })
    reply.value = null;
    ifReply.push(false);
  }
}

//传入动态 Id 判断当前用户是否点赞
function ifLike(dynamicId) {
  return(likeList.value.includes(dynamicId));
}

//点赞事件
async function like_click(id) {
  await likeClick(id);
  if(!likeList.value.includes(id)){
    likeList.value.push(id);
  }else {
    likeList.value.splice(likeList.value.indexOf(id),1);
  }
 
  store.dispatch('likeList',likeList);
}


</script>

<style scoped>
/* 文本内容 */
.content {
  color: #000;
  font-size: 18px;
}

/* 评论输入框 */
.comment_input {
  display: flex;
  flex-direction: row;
}
/* 热评 */
.hot_comment {
  height: 30px;
  width: 400px;
  font-weight: 500;
  border: orange solid 2px;
  border-radius: 10px;
  line-height: 30px;
  padding: 0 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* 点赞图标 */
.likeIcon {
  height: 30px;
  width: 30px;
  line-height: 30px;
}

/* 图片九宫格 */
.imageBox {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

/* 点赞和详情 */
.bottom {
  display: flex;
  flex-direction: row-reverse;
}
</style>